<template>
  <div class="list-item" @click="handleClick" :class="read === true ? 'read' : ''">
    <Row type="flex">
      <Col class="list-item-meta" style="margin-right:16px;flex:0" v-if="avatar">
      <Avatar icon="person" :src="avatar" style="margin-top:4px"></Avatar>
      </Col>
      <Col style="flex:1">
      <h4 class="item-meta-title">
      <div class="title">{{title}}
        <div class="extra" v-if="extra">
          <Tag :color="color">{{ extra }}</Tag>
        </div>
      </div>
    </h4>
      <div class="item-meta-description">
        <div class="description">{{description}}</div>
        <div class="datetime">{{datetime}}</div>
      </div>
      </Col>
    </Row>
  </div>
</template>
<script>
export default {
  name: 'NoticeList',
  props: {
    avatar: {
      type: String
    },
    title: {
      type: String
    },
    description: {
      type: String
    },
    datetime: {
      type: String
    },
    extra: {
      type: String
    },
    color: {
      type: String
    },
    read: {
      type: Boolean
    },
    index: {
      type: Number
    }
  },
  methods: {
    handleClick() {
      this.$emit('onItemClick', this.index)
    }
  }
}

</script>
<style scoped>
.list-item {
  padding: 12px 24px;
  outline: none;
  border-bottom: 1px solid #e8e8e8;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  overflow: hidden;
  cursor: pointer;
}



/*.list-item:last-child {
  border-bottom: 0;
}*/

.list-item:hover {
  background: #e6f7ff;
}

.list-item.read {
  opacity: .4;
}

.item-meta-title {
  color: rgba(0, 0, 0, 0.65);
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 22px;
  display: block;
}

.item-meta-title .title {
  font-weight: normal;
  margin-bottom: 8px;
  word-wrap: wrap;
  white-space: normal;
}

.item-meta-title .extra {
  float: right;
  color: rgba(0, 0, 0, 0.45);
  font-weight: normal;
  margin-right: 0;
  margin-top: -2px;
}

.item-meta-description {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 22px;
  word-break: break-all;
}

.item-meta-description .description {
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.item-meta-description .datetime {
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.5;
}

</style>
<style>
.list-item .ivu-avatar {
  background: #fff;
}

</style>
